<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">

      <div>
        <!-- 搜索 -->
        <el-input v-model="query.xm" clearable size="small" placeholder="姓名、身份证号" style="width: 170px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" prop="xm" label="姓名" />
        <el-table-column align="center" prop="xb" label="性别" />
        <el-table-column align="center" prop="nl" label="年龄" />
        <el-table-column align="center" prop="sfz" label="身份证" width="150" />
        <el-table-column align="center" prop="qymc" label="机构名称" width="230" />
        <el-table-column align="center" prop="qyzt" label="签约状态">
          <template slot-scope="scope">
            {{ dict.label.qygl[scope.row.qyzt] }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="qysj" label="签约日期" width="90" />

        <el-table-column align="center" prop="ssqx" label="所属统筹区">
          <template slot-scope="scope">
            {{ dict.label.ccstcqh[scope.row.ssqx] }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="dyksrq" label="待遇开始日期" width="100" />
        <el-table-column align="center" prop="dyjsrq" label="待遇结束日期" width="100" />
        <el-table-column align="center" prop="cblx" label="参保类别" width="130" />
        <el-table-column align="center" prop="hldz" label="护理地址" width="180" />
        <el-table-column align="center" prop="jhrxm" label="监护人姓名" />
        <el-table-column align="center" prop="jhrdh" label="监护人电话" width="130" />
        <el-table-column align="center" prop="jhrgx" label="关系" width="130" />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleClick(scope.row)">选择机构</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 选择机构 -->
      <el-dialog title="选择机构" :visible.sync="dialogCancleFormVisible" width="500px">
        <el-form prop="bisGsglId" :label-position="labelPosition" label-width="120px" :rules="rules">
          <el-form-item label="姓名:" prop="snryxm">
            <el-input v-model="snryxm" type="text" style="width: 280px;" disabled />
          </el-form-item>
          <el-form-item label="性别:" prop="snryxb">
            <el-input v-model="snryxb" type="text" style="width: 280px;" disabled />
          </el-form-item>
          <el-form-item label="年龄:" prop="snrynl">
            <el-input v-model="snrynl" type="text" style="width: 280px;" disabled />
          </el-form-item>
          <el-form-item label="身份证:" prop="snrysfz">
            <el-input v-model="snrysfz" type="text" style="width: 280px;" disabled />
          </el-form-item>
          <el-form-item label="原选择机构:" prop="yhljgmc">
            <el-input v-model="yhljgmc" type="text" style="width: 280px;" disabled />
          </el-form-item>
          <el-form-item label="选择机构:" prop="yhljgmc">
            <el-select v-model="query.bisGsglId" filterable placeholder="请选择机构">
              <el-option
                v-for="item in allGsgl"
                :key="item.bisGsglId"
                :label="item.bisGsglQymc"
                :value="item.bisGsglId"
              />
            </el-select>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button :loading="cancleStaus === 2" @click="quxiao()">取 消</el-button>
          <el-button :loading="cancleStaus === 2" type="primary" @click="cancle()">确 定</el-button>
        </div>
      </el-dialog>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudQy from '@/api/business/qy'
import CRUD, { presenter, header, form } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import { queryAll } from '@/api/business/gsgl'

const defaultForm = { bisQyId: null, bisQyHljgId: null, xm: null, xb: null, nl: null, sfz: null, qyzt: null, qysj: null, ssqx: null, cblx: null, jhrxm: null, jydate: null, gsgl: { bisGsglId: null }, bisGsglId: null }
export default {
  name: 'Cxjg',
  components: { pagination, rrOperation, crudQy },
  mixins: [presenter(), header(), form(defaultForm)],
  dicts: ['xb', 'yjsgx', 'ccs', 'zhzt', 'ccstcqh', 'qygl'],
  cruds() {
    return CRUD({ title: '重选居家机构', url: 'api/qy/qyHomeCxjg', idField: 'bisQyId', sort: 'bisQyId,desc', crudMethod: { ...crudQy }})
  },
  data() {
    return {
      dialogCancleFormVisible: false,
      approveDialog: false,
      selectedZhids: [],
      cancleStaus: 1,
      allGsgl: [],
      qyid: '',
      bisGsglId: '',
      snryxm: '',
      snryxb: '',
      snrynl: '',
      snrysfz: '',
      yhljgmc: '',
      permission: {
        add: ['admin', 'qy:add'],
        edit: ['admin', 'qy:edit'],
        del: ['admin', 'qy:del']
      }
    }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    doApproveQuery() {
      this.crud.toQuery()
    },
    handleClick(row) {
      this.queryAll()
      // 按钮从列表带过来的值，重新变量赋值
      this.qyid = row.qyid
      this.snryxm = row.xm
      this.snryxb = row.xb
      this.snrynl = row.nl
      this.snrysfz = row.sfz
      this.yhljgmc = row.qymc
      this.dialogCancleFormVisible = true
    },
    // 获取所有公司
    queryAll() {
      queryAll().then(res => {
        this.allGsgl = res
      }).catch(() => { })
    },
    cancle() {
      const data = { bisGsglId: this.query.bisGsglId, qyid: this.qyid }
      console.log('1=========', data)
      if (data.bisGsglId === undefined) {
        this.$notify({
          title: '请选择护理机构',
          type: 'warning',
          duration: 2500
        })
        return
      }
      this.$confirm(`你将更换居家护理机构吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('2=========', data)
        crudQy.qyHomeCxjgUpdate(data)
          .then(res => {
            this.$notify({
              title: '操作成功',
              type: 'success',
              duration: 2500
            })
            // 清空下拉选择
            this.query.bisGsglId = undefined
            this.dialogCancleFormVisible = false
            this.cancleStaus = 1
            this.crud.toQuery()
          })
          .catch(err => {
            this.dialogCancleFormVisible = false
            this.cancleStaus = 1
            console.log(err)
          })
      })
    },
    quxiao() {
      // 清空下拉选择
      this.query.bisGsglId = undefined
      this.dialogCancleFormVisible = false
      this.cancleStaus = 1
    }
  }

}
</script>

<style scoped>

</style>
